<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.为什么使用模块化开发</title>
</head>

<body>
  <script>
    // 在过去 JS 不支持模块时我们使用AMD / CMD（浏览器端使用）、CommonJS（Node.js使用）、UMD(两者都支持)等形式定义模块。

    //AMD 代表性的是 require.js，CMD 代表是淘宝的 seaJS 框架。

    //下面通过定义一个类似 require.js 的 AMD 模块管理引擎，来体验模块的工作原理。

    let module = (function () {
      //模块列表集合
      const moduleLists = {};
      function define (name, modules, action) {
        modules.map((m, i) => {
          modules[i] = moduleLists[m];
        });
        //执行并保存模块
        moduleLists[name] = action.apply(null, modules);
      }

      return { define };
    })();

    //声明模块不依赖其它模块
    module.define("hd", [], function () {
      return {
        show () {
          console.log("hd module show");
        }
      };
    });

    //声明模块时依赖其它模块
    module.define("xj", ["hd"], function (hd) {
      hd.show();
    });

  </script>
</body>

</html>